<!-- 网站信息 -->
<template>
  <div class="website-information">
    <el-form ref="formRef" :rules="rules" class="ls-form" :model="formData" label-width="120px">
      <el-card shadow="never" class="!border-none">
        <div class="text-xl font-medium mb-[20px]">签到配置</div>
        <el-form-item label="连续签到" prop="radioValue">
          <div class="w-80">
            <el-radio-group v-model="formData.radioValue">
              <el-radio :label="1">开启</el-radio>
              <el-radio :label="0">关闭</el-radio>
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item :prop="item.prop" :label="item.label" v-for="(item,index) in keys" :key="index">
          <el-input type="number" v-model.number="formData[item.key]"/>
        </el-form-item>
        <el-form-item label="签到规则" prop="rule">
          <editor v-model="formData.rule" :height="400" :width="800"/>
        </el-form-item>
      </el-card>
    </el-form>
    <footer-btns v-perms="[]">
      <el-button type="primary" @click="handleSubmit">保存</el-button>
    </footer-btns>
  </div>
</template>

<script lang="ts" setup name="webInformation">
import {
  apiScoreConfigLists,
  apiScoreConfigAdd,
  apiScoreConfigDelete,
  apiScoreConfigDetail,
  apiScoreConfigEdit
} from '@/api/score_config'
import type {FormInstance} from 'element-plus'

const formRef = ref<FormInstance>()

// 表单数据
const formData = reactive<any>({
  radioValue: 0,
  value: [], //
  status: '', //
  create_time: '', //
  rule: '', //
  signOption: [],
})

const keys = ref<any>([])

watch(() => formData.radioValue, value => {
  if (value) return initOption(formData.value)
  return removeOption(formData.value)
})

function removeOption(list: Array<{ scale: number }>) {
  formRef.value?.resetFields()
  if (keys.value.length) {
    keys.value.forEach((item: any) => {
      const {key} = item
      delete rules.value[key]
    })
  }
  keys.value = [
    {
      key: 'sign_one',
      label: '签到积分',
      prop: 'sign_one'
    }
  ]
  const [target] = list
  formData['sign_one'] = target ? target.scale : ''
  rules['sign_one'] = [{
    required: true, message: '请输入签到积分', trigger: 'change'
  }]
}
function initOption(list: Array<{ scale: number }>) {
  const options = []
  if (formData.hasOwnProperty('sign_one')){
    delete formData.sign_one
  }
  for (let i = 0; i < 5; i++) {
    if (list.length !== 1){
      const target = list[i]
      formData[`sign_${i}`] = target ? target.scale : ''
    }else{
      formData[`sign_${i}`] = ''
    }
    options.push({
      key: 'sign_' + i,
      label: '第' + (i + 1) + '天积分',
      prop: 'sign_' + i
    })
    rules.value['sign_' + i] = [
      {
        required: true,
        message: `请输入第${i + 1}天的积分`,
        trigger: 'change',
      }
    ]
  }
  keys.value = options
}

async function initData(flag:boolean) {
  const resp = await apiScoreConfigDetail({id: 1})
  console.log(resp, 'resp')
  const {rule, status, value} = resp
  const v = (status * 1)
  let valueList = []
  formData.rule = rule
  formData.radioValue = v
  valueList = JSON.parse(value)
  if (valueList.length) {
    formData.value = valueList
  }
  console.log(valueList, 'valueList')
  if (v === 1) {
    initOption(valueList)
  } else {
    removeOption(valueList)
  }
}

initData(true)

function getOptionValue() {
  if (!keys.value.length) return []
  return keys.value.map((item: any) => {
    const {key} = item
    return {
      scale: formData[key]
    }
  })
}

async function submitHandle() {
  const {rule, radioValue} = formData
  const value = getOptionValue()
  await apiScoreConfigEdit({
    id: 1,
    rule,
    status: radioValue,
    value: JSON.stringify(value),
  })
  await initData(true)
}

function handleSubmit() {
  formRef.value?.validateField().then(() => {
    submitHandle()
  }).catch((error) => {
    console.log('err', error)
  })
}

// 表单验证
const rules = ref<any>({
  radioValue: [
    {
      required: true,
      message: '',
      trigger: ['blur']
    }
  ],
  rule: [],
})
</script>

<style lang="scss" scoped></style>
